<!--将底部导航栏封装起来-->
<template>
<van-tabbar v-model="active" class="tabbar" @change="change"> <!--导航栏下标需要用到van-tabbar组件和vant-tabbar-item组件-->>
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="friends-o">榜单</van-tabbar-item>
    <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
</van-tabbar>
</template>

<script setup>
import {ref,onMounted} from 'vue';
import {useRouter,useRoute} from 'vue-router'
    let active = ref(0);  //让active具有响应式

    const router = useRouter()   //引入之后设置变量
    const route = useRoute()

    const change=(value)=>{//给change事件一个回调函数,改变active的值
        switch (value) {
            case 0:       //active为0时，返回home页面
            router.push({name:'home'})
            break

            case 1:       //active为1时，返回菜单页面
            router.push({name:'menu'})
            break

            case 2:
            router.push({name:'mine'})
            break
        }
}
    
    onMounted(()=>{  //根据路由判断，最明显的问题就是延迟
        if(route.name === 'home'){
            active.value = 0
        }else if(route.name === 'menu'){
            active.value = 1
        }else if(route.name === 'mine'){
            active.value = 2
        }
        
    })
</script>